<template>
	<el-row class="shopList">
		<div class="div1">
			<div class="div1-1">
				<p class="div1-1-p1"><i class="el-icon-s-data"></i>商品-添加</p>
			</div>
			<button @click="go2List()">返回列表</button>
			<button @click="add()">保存</button>
		</div>
		<hr>
		<el-row class="big">
			<el-col>
				<!-- <div style=" width: 300px; height: 300px;">
				<el-table-column fixed prop="pic" label="图片">
					<template slot-scope="scope">
						<div>
							<img v-bind:src="`${$imgurl}/api/public/showimg/${scope.row.picture}`"
								style="height: 60px; width: 60px;" />
						</div>
					</template>
				</el-table-column>
				
			</div> -->
				<p>图片:<input type="file" ref="mypic"></p>

			</el-col>

			<el-col>
				<el-form :model="bookObj" ref="bookObj" label-width="100px" class="demo-ruleForm">
					<el-form-item label="商品名称" prop="name" :rules="[
				      {required: true,  message: '名称不能为空'}
				      
				    ]">
						<el-input v-model="bookObj.name" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="商品序号" prop="sn" :rules="[
					  { required: true, message: '序号不能为空'}
					]">
						<el-input v-model="bookObj.sn" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品价格" prop="price" :rules="[
					  { required: true, message: '价格不能为空'},
					  { type: 'number', message: '价格必须为数字值'}
					]">
						<el-input v-model.number="bookObj.price" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品厂商" prop="maker" :rules="[
					  { required: true, message: '厂商不能为空'}]">
						<el-input v-model="bookObj.maker" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="书籍作者" prop="author" :rules="[
					  {required: true,  message: '作者不能为空'}
					]">
						<el-input v-model="bookObj.author" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="出厂时间">
						<el-date-picker v-model="bookObj.tmake" type="datetime" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="timestamp">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="商品库存" prop="stock">
						<el-input v-model.number="bookObj.stock" autocomplete="off"></el-input>
					</el-form-item>

					<el-form-item label="商品类型" prop="type">
						<el-select v-model="bookObj.type.id" placeholder="请选择">
							<el-option v-for="t in typeList" :value="t.id" :label="t.name"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="商品详情" prop="info" :rules="[
					  {required: true, message: '详情不能为空'},
					]">
						<el-input type="textarea" v-model="bookObj.info"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		name: 'AddBookList',
		data() {
			return {
				bookList: [],
				bookObj: {
					type: {}
				},
				typemsg: ['显示', '添加', '修改'],
				type: 1, //1是添加 2是修改
				typeList: []
			};
		},
		methods: {
			//返回商品列表
			go2List() {
				this.$router.push({
					path: '/adm/bookList'
				})
			},
			//添加商品
			add() {
				let fd = new FormData();
				if (this.bookObj.id != null) {
					fd.append('id', this.bookObj.id);
				} else {
					fd.append('id', 0)
				}
				fd.append("sn", this.bookObj.sn);
				fd.append("name", this.bookObj.name);
				fd.append("price", this.bookObj.price);
				fd.append("author", this.bookObj.author);
				fd.append("maker", this.bookObj.maker);
				fd.append("tmake", this.bookObj.tmake);
				fd.append("info", this.bookObj.info);
				fd.append("stock", this.bookObj.stock);
				fd.append("type.id", this.bookObj.type.id);
				let content = this.$refs.mypic.files[0];
				fd.append("mypic", content);
				this.$postf("/api/adm/book/add", fd)
					.then((resp) => {
						console.log(resp.data);
						this.bookObj = resp.data.data.book;
					})
			},

			findType() {
				this.$get("/api/adm/type/findAll2").then((resp) => {
					console.log(resp.data);
					this.typeList = resp.data.data;
				})
			}

		},
		mounted() {
			this.findType();
			console.log(this.$route.query.id);
			if (this.$route.query.id != 0) {
				this.$get("/api/adm/book/findById/" + this.$route.query.id)
					.then((resp) => {
						console.log(resp.data);
						console.log(resp.data.data);
						this.bookObj = resp.data.data;
						this.type = 2;
					})
			} else {
				this.type = 1;
			}
		}
	}
</script>

<style scoped>
	.shopList {
		margin-left: 20px;
		width: 100%;
		height: 600px;
		line-height: 50px;
	}

	.div1 {
		margin-top: 18px;
		display: flex;
		justify-content: space-between;
		margin-bottom: -9px;
		width: 500px;
	}

	.div1-1 {
		display: flex;
	}

	.div1-1-p1 {
		font-size: 18px;
	}

	.div1 .addhotpic {
		width: 300px;
		color: white;
		background-color: #87ceeb;
	}

	.div1 button {
		border: none;
		width: 100px;
		color: #87ceeb;
		height: 38px;
		margin-top: 7px;
		border-radius: 2px;
		background-color: white;
	}

	/* 刷新图标 */
	.el-icon-refresh-right {
		color: white;
		font-size: 22px;
	}

	.shopList hr {
		border: 1px gainsboro solid;
	}

	.shopList .big {
		display: flex;
		margin: 10px 35px;
	}
</style>